<template>
    <div class="login">
        <h3>
            登录
        </h3>
        <el-divider></el-divider>
        <el-input v-model="username" placeholder="请输入" class="mb">
            <template slot="prepend">用户</template>
        </el-input>
        <el-input type="password" v-model="password" placeholder="请输入" class="mb">
            <template slot="prepend">密码</template>
        </el-input>
        <el-button type="primary" @click="login">登录</el-button>
        <el-button @click="$router.push('/reg')">注册</el-button>
    </div>
</template>
<script>
export default {
    data:()=>({
        username:'',
        password:''
    }),
    methods:{
        login(){
            this.$axios({
                url:'/api/login',
                method:'post',
                data:{username:this.username,password:this.password}
            }).then(
                res=>{
                    //同步vuex和cookie
                    console.log("res.data****登录*********"+res.data.data);
                    this.$cookies.set('user',res.data.data);
                    this.$store.commit('user/M_UPDATE_USER',res.data.data);
                    //如果没有找到path属性，或者当前是登录或注册的话 直接跳转至用户页面
                    if(!this.$route.query.path || /login|reg/.test(this.$route.query.path)){
                        this.$router.replace('/user');
                    }else{
                        //其他情况 从哪里来到哪里去
                        this.$router.replace(this.$route.query.path);    
                    }
                }
            );
        }
    }
}
</script>

<style scoped>
/* 使用scoped 声明为当前组件私有化使用 */
.login {
    width:35%;
    height: auto;
    position: absolute;
    left: 50%;
    top:50%;
    margin-left: -17%;
    transform: translateY(-50%);
}.mb{
    margin-bottom: 20px;
}
</style>